<template>
    <div class="breadcrumb-container">
        <!-- 面包屑 -->
        <div class="left">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }" v-show="path != '/home'">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item,index) in breadMatcheds" :key="index" :to="item.path">
                    {{ item.meta.taitle }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="iformation" v-if="userInfo">
            <el-dropdown size="large" split-button  style="background-color: white;">
                欢迎{{userInfo.account}}登录
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="()=>router.push('/accountCenter')">个人中心</el-dropdown-item>
                        <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-avatar :size="45" :src="baseUrl+userInfo.imgUrl"  v-if="userInfo" fit="fill"/>
            <!-- <img :src="baseUrl+userInfo.imgUrl" alt="" v-if="userInfo"> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue';
import {getUserInfo} from '@/api/users';
import { ref,computed,watch } from 'vue';
import { baseUrl } from "@/utile/commen.js"
import {useRoute,useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();
const path = ref('');

//动态面包屑
//获取路由对象中的matched属性
console.log(route.matched)

//监听路由的变化
let breadMatcheds = computed(()=>{
    return route.matched.filter(item=>item.meta.unShow!==true);
})

path.value =  computed(()=>{
    return route.paths;
})


//导入pinai
import { useUserStore } from '@/stores/userStore.js';
const store = useUserStore();

const userInfo = ref();
//获取登录的用户信息
const user = JSON.parse(sessionStorage.getItem('user'));
const getUser = async ()=>{
    const res = await getUserInfo({id:user.id});
    userInfo.value = res.accountInfo;
    // console.log(res.accountInfo);
    //将用户信息存储到pinia中 数据持久化 到localstroage中
    store.setInfor(res.accountInfo);
}
getUser();

//监听用户信息的变化 
watch(()=>store.userFlag,(newVal,oldVal)=>{
    getUser();
})

//推出
const logout = ()=>{
    //清除用户信息
    sessionStorage.removeItem('user');
    //清除pinia中的用户信息
    store.setInfor(null);
    //跳转到登录页面
    router.push('/login');
}
</script>

<style scoped>
.breadcrumb-container {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60px;
}
.left{
    flex:1;
}
.iformation {
    height: 40px;
}

img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 10px;
}

:deep(.el-button ){
    /* --el-button-font-weight: var(--el-font-weight-primary); */
    --el-button-border-color: none;
    --el-button-hover-bg-color: none;
    --el-button-hover-border-color: none;
    --el-button-text-color: none;
    --el-button-active-color: none;
    --el-button-active-text-color: none;
    --el-button-active-border-color: none;
    --el-button-active-bg-color: none;
    --el-button-outline-color:none;
    --el-button-hover-link-text-color: none;
    --el-button-disabled-bg-color: none;
    --el-button-disabled-border-color:none;
    --el-button-divide-border-color: none;
    --el-button-hover-text-color: none;
}
:deep(.el-button:hover){
    background-color: none;
    border-color: none;
    color: #606266;
    outline: none;
}
:deep(.el-dropdown span){
    color: #606266;
}
:deep(.el-dropdown) {
  .el-button:first-child {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .el-button:last-child {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .el-button {
    border: none !important;
    background: transparent !important;
    &:hover,
    &:focus {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
  }
  
  .el-button-group::before {
    display: none;
  }
}

</style>    